<template>
  <div class="main-container">
    <el-card class="box-card">
      <div class="logo">
        <img src="../assets/logo.png" alt="系统logo">
        <h1>用户注册</h1>
      </div>

        <el-form :model="formData" ref="formRef" class="main-form">
          <el-form-item
              prop="type"
              :rules="[{ required: true, message: '请选择用户类型', trigger: 'change' }]"
          >
            <el-select
                v-model="formData.type"
                placeholder="请选择用户类型"
                size="large"
                class="type-select"
            >
              <el-option label="老人" value="ELDER" />
              <el-option label="护工" value="STAFF" />
              <el-option label="家属" value="FAMILY" />
            </el-select>
          </el-form-item>
          <el-form-item prop="username"
                        :rules="[{required:true,message:'请输入用户名',trigger:[ 'blur','change']}]">
            <el-input
                placeholder="请输入账号"
                v-model.trim="formData.username"
                size="large"
                class="custom-input"
                clearable
            >
              <template #prefix>
                <el-icon class="input-icon"><User /></el-icon>
              </template>
            </el-input>

          </el-form-item>
          <el-form-item  prop="password"
                        :rules="[{required:true,message:'请输入密码',trigger:[ 'blur','change']}]">
            <el-input
                v-model.trim="formData.password"
                type="password"
                placeholder="请输入密码"
                size="large"
                show-password
                class="custom-input"
            >
              <template #prefix>
                <el-icon class="input-icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword"
                        :rules="[{required:true,message:'请确认密码',trigger:[ 'blur','change']}]">
            <el-input
                type="password"
                placeholder="请确认密码"
                size="large"
                show-password
                class="custom-input"
                v-model.trim="formData.confirmPassword"
                clearable
            >
              <template #prefix>
                <el-icon class="input-icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" style="width: 100%">
            <el-space direction="vertical" alignment="left" style="width: 100%">
              <el-button
                  type="primary"
                  size="large"
                  class="register-btn"
                  @click="submitForm"
              >
                立即注册
              </el-button>
            </el-space>
          </el-form-item>

          <div class="footer-links">
            <router-link to="/login" class="link">已有账号？立即登录</router-link>
          </div>
        </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import http from "@/utils/http.js";
import router from "@/router/index.js";
import {Lock, User} from "@element-plus/icons-vue";

const formRef = ref(null);
const formData = ref({
  type: '',
  username: '',
  nickname: '',
  avatarUrl: '',
  password: '',
  confirmPassword: ''
});



const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) return
    
    if (formData.value.password !== formData.value.confirmPassword) {
      ElMessage.error("两次输入的密码不一致")
      return
    }

    http.put("/common/register", formData.value)
      .then(res => {
        if (res.code !== 200) {
          ElMessage.warning(res.message || "注册失败")
          return
        }
        
        ElMessage.success({
          message: "注册成功",
          duration: 2000
        })

        window.location.href = "/login";
      })
      .catch(e => {
        console.error('注册请求失败:', e)
        const errorMsg = e.response?.data?.message || 
          e.message || 
          '注册服务不可用，请稍后重试'
        ElMessage.error(errorMsg)
      })
  })
}
</script>

<style scoped>
@import '../assets/css/auth.css';


</style>
